<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行程码收集程序</title>

    <script type="text/javascript" src="{{URL::asset('js/jquery.min.js')}}"></script>
    <link rel="stylesheet" href="{{URL::asset('css/layui.css')}}">
</head>
<body>

<div class="username icon">{{$username}}</div>
<div class="account icon">{{$account}}</div>

<div style="text-align: center;font-weight: bold;font-size: 22px;">新美星行程码收集程序</div>
<div style="text-align: center">
    <div class="layui-upload">
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="demo1" style="width: 230px;height: 300px;">
            <p id="demoText"></p>
        </div>
        <button type="button" class="layui-btn" id="test1" style="width: 250px">点击上传行程码截图</button>
        <div style="width: 100%;text-align: center;display: none;margin-top: 20px;" class="progress_line">
            <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                <div class="layui-progress-bar" lay-percent=""></div>
            </div>
        </div>
    </div>
</div>

<style>
    .icon{display: none}
</style>
<a name="list-progress"> </a>
<script type="text/javascript" src="{{URL::asset('js/layui.all.js')}}"></script>
<script>
    layui.use(['upload', 'element', 'layer'], function(){
        let $ = layui.jquery
            ,upload = layui.upload
            ,element = layui.element
            ,layer = layui.layer;
        let username = $(".username").html(),account = $(".account").html();

        let uploadInst = upload.render({
        elem: '#test1'
        ,url: 'http://wx.newamstar.com:8078/newstar/public/upload_xcm'//'https://httpbin.org/post' //改成您自己的上传接口
        ,before: function(obj){
                this.data={"username":username,"account":account}//携带动态参数
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
                $('#demo1').attr('src', result); //图片链接（base64）
            });
            element.progress('demo', '0%'); //进度条复位
            layer.msg('上传中', {icon: 16, time: 0});
        }
        ,done: function(res){
            //如果上传失败
            if(res.code > 0){
                return layer.msg('上传失败');
            }
            //上传成功的一些操作
            //……
            $('#demoText').html(''); //置空上传失败的状态
        }
        ,error: function(){
            //演示失败状态，并实现重传
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function(){
                uploadInst.upload();
            });
        }
        //进度条
        ,progress: function(n, elem, e){
            $(".progress_line").show();
            element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
            if(n == 100){
                $(".progress_line").hide();
                //layer.msg('上传完毕', {icon: 1});
                layer.msg('上传完毕', {
                    icon: 1,
                    time: 6000000 //2秒关闭（如果不配置，默认是3秒）
                }, function(){
                    //do something
                });



            }
        }
    });
});
</script>
</body>
</html>
